<!--  -->
<template>
  <div id="detail">
   <detail-nav-bar class="detail-nav" @titleClick="titleClick" ref="detailnav" />
   <scroll class="content" ref="scroll" :probe-type="3" @scroll="scrollfun">  
    <detail-swiper :banners="topBnner" />
    <detail-base-info :goods="goods" />
    <detail-shop-info :shop="shopcent"  />
    <detail-goods-info :detail-info="detailInfo" @imgLoad="goodsImgLoad" />
    <detail-param-info ref="params" :param-info="paramInfo" />
    <detail-comment-info ref="comment" :comment-info = "commentInfo" />
    <goods-list ref="recommend" :goods="recommends" />
    <!-- <h2>详情页</h2>
    <h3>{{iid}}</h3> -->
   </scroll>
    <detail-bottom-bar @addCar='addTocart' />
    
    <back-top v-show="isShowBackTop" @click.native="backClick" />
    <!-- <toast :message='message' :show='tshow'></toast> -->
  </div>
</template>

<script>
import DetailNavBar from './childComps/DetailNavBar';
import DetailSwiper from './childComps/DetailSwiper';
import DetailBaseInfo from './childComps/DetailBaseInfo';
import DetailShopInfo from './childComps/DetailShopInfo';
import DetailGoodsInfo from './childComps/DetailGoodsInfo';
import DetailParamInfo from './childComps/DetailParamInfo';
import DetailCommentInfo from './childComps/DetailCommentInfo';
import DetailBottomBar from './childComps/DetailBottomBar.vue'


import Scroll from 'components/common/scroll/Scroll';
import GoodsList from 'components/content/goodsList/GoodsList';
import BackTop from 'components/content/backTop/BackTop';
// import Toast from 'components/common/toast/Toast'

import {getDetail, Goods, Shop, Param, getRecommend } from 'network/detail';
import {debounce} from 'common/utils';
import {itemListenerMixin, backTopMixin} from 'common/mixin';

import { mapActions } from 'vuex'

export default {
  name: 'Detail',
  mixins:[itemListenerMixin, backTopMixin],
  data() {
    return {
      iid: null,
      topBnner:[],
      goods: {},
      shopcent: {},
      detailInfo: {},
      paramInfo:{},
      commentInfo:{},
      recommends:[],
      themeTopYs:[],
      getThemeTopY: null,
      currentIndex: 0,
      isShowBackTop: false,
      // message:'',
      // tshow: false,
    }
  },
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    Scroll,
    DetailShopInfo,
    DetailGoodsInfo,
    DetailParamInfo,
    DetailCommentInfo,
    DetailBottomBar,
    GoodsList,
    BackTop,
    // Toast,
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    // 保存获取到的iid
    this.iid = this.$route.params.iid

    // // 根据iid请求数据
    getDetail(this.iid).then(res => {
      // console.log(res)
      // 获取到详情主图
      this.topBnner = res.result.itemInfo.topImages
      // 获取商品信息
      this.goods = new Goods(res.result.itemInfo,res.result.columns,res.result.shopInfo)
      //3.获取商家详情
      this.shopcent = new Shop(res.result.shopInfo)
      // console.log(this.shopcent)
      //4.获取商家详情图片
      this.detailInfo = res.result.detailInfo
      //5.获取参数信息
      this.paramInfo = new Param(res.result.itemParams.info,res.result.itemParams.rule)
      // 取出评论信息
      if(res.result.rate.cRate !== 0){
        this.commentInfo = res.result.rate.list[0]
      }

      // 给getThemeTopY赋值
      this.getThemeTopY = debounce(() =>{
        this.themeTopYs = []
        this.themeTopYs.push(0);
        this.themeTopYs.push(this.$refs.params.$el.offsetTop)
        this.themeTopYs.push(this.$refs.comment.$el.offsetTop)
        this.themeTopYs.push(this.$refs.recommend.$el.offsetTop)
        console.log( this.themeTopYs)
      },50)

    })
  
    // 请求推荐数据
    getRecommend().then(res => {
      console.log(res)
      this.recommends = res.data.list
    })
  
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    
    // let newRefresh = debounce(this.$refs.scroll.refresh,100)
    // this.itemImgListener = () => {
    //   newRefresh()
    // }
    //  // 监听item中图片加载完成
    // this.$bus.$on('itemImageLoad', this.itemImgListener)
  },
  updated(){

    // this.themeTopYs = []
    // this.themeTopYs.push(0);
    // this.themeTopYs.push(this.$refs.params.$el.offsetTop)
    // this.themeTopYs.push(this.$refs.comment.$el.offsetTop)
    // this.themeTopYs.push(this.$refs.recommend.$el.offsetTop)
    // console.log( this.themeTopYs)
  },
  methods: {    
  ...mapActions(['addCart']),
    goodsImgLoad() {
      // console.log(111111)
      this.$refs.scroll.refresh()
      this.getThemeTopY()
      
    },
    titleClick(index){
      console.log(index);
      this.$refs.scroll.scrollTo(0,-this.themeTopYs[index],100)
    },    
    scrollfun(position) {
      this.listenShowBackTop(position)
      // console.log(position)
      const positionY = -position.y
      let length = this.themeTopYs.length
      
      for(let i=0;i<length;i++){
        if(this.currentIndex !== i && ((i<length-1 && positionY > this.themeTopYs[i] && positionY < this.themeTopYs[i+1])||(i === length-1 && positionY > this.themeTopYs[i]))){
          console.log(i)
          this.currentIndex = i
          this.$refs.detailnav.currentIndex = this.currentIndex
        }
      }
    },
    addTocart() {
      // console.log('------')
      // 获取购物车需要展示信息
      const product = {}
      product.image = this.topBnner[0];
      product.title = this.goods.title;
      product.dsc = this.goods.dsc;
      product.price = this.goods.realPrice;
      product.iid = this.iid;
      // 将商品添加到购物车里
      /* 方案一*/
      // this.$store.dispatch('addCart',product).then(res => {
      //   console.log(res)
        
      //   // this.tshow = true
      //   // this.message = res
      //   // setTimeout(() => {
      //   //   this.tshow = false
      //   //   this.message = ""
      //   // },1500)
      // })
       /* 方案二*/
       this.addCart(product).then(res => {
        //  console.log(res)
        // console.log("toast")
        // console.log(this.$toast)
        // this.$toast.show()
        this.$toast.show(res,1500)

       })
    }
  },
  destroyed(){
    this.$bus.$off('itemImageLoad',this.itemImgListener)
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
#detail {
  position: relative;
  background: #fff;
  height: 100vh;
  z-index: 12;
}
.detail-nav {
  position: relative;
  z-index: 12;
  background: #fff;
}
.content {
  height: calc(100% - 44px);
}
</style>
